<template>
  <div class="bookListItem">
    <div class="content">
      <div>
        <img :src="item.imgUrl" />
      </div>
      <p class="title">
        <router-link
          :to="{ name: 'book', params: { id: item.id } }"
          target="_blank"
        >
          {{ item.title }}
        </router-link>
      </p>
      <p>
        <span class="factPrice">
          {{ currency(factPrice(item.price, item.discount)) }}
        </span>
        <span>
          定价：<i class="price">{{ currency(item.price) }}</i>
        </span>
      </p>
      <p>
        <span>{{ item.author }}</span>
        <span>{{ item.publishDate }}</span>
        <span>{{ item.bookConcern }}</span>
      </p>
      <p>
        {{ item.brief }}
      </p>
      <p>
        <button class="addCartButton" @click="addCartItem(item)">
          加入购物车
        </button>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { useCartStore } from '@/stores/cart'
import router from '@/router'
const store = useCartStore()
const currency: any = inject('currency')
interface IBooks {
  author: string
  bigImgUrl: string
  bookConcern: null
  brief: null
  discount: number
  id: number
  imgUrl: string
  inventory: number
  price: number
  publishDate: null
  title: string
}
// const props = defineProps({
//   item: Object,
// })
defineProps<{
  item: IBooks
}>()
function factPrice(price: number, discount: number) {
  return price * discount
}
const addCartItem = (item: IBooks) => {
  let quantity = 1
  let newItem = {
    ...item,
    price: factPrice(item.price, item.discount),
    quantity,
  }
  store.addProductToCart(newItem)
  router.push('/cart')
}
</script>

<style scoped>
.bookListItem {
  display: flex;
  justify-content: center;
  border-bottom: solid 1px #ccc;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
}
.bookListItem p {
  text-align: left;
}
.bookListItem p span {
  padding-left: 10px;
}
.bookListItem img {
  width: 150px;
  height: 150px;
  float: left;
}
.addCartButton {
  padding: 5px 10px 6px;
  color: #fff;
  border: none;
  border-bottom: solid 1px #222;
  border-radius: 5px;
  box-shadow: 0 1px 3px #999;
  text-shadow: 0 -1px 3px #444;
  cursor: pointer;
  background-color: #e33100;
}
.addCartButton:hover {
  text-shadow: 0 1px 1px #444;
}
.bookListItem .price {
  color: #cdcdcd;
  text-decoration: line-through;
}
.bookListItem .factPrice {
  color: red;
  font-weight: bold;
}

.bookListItem .title {
  color: #e00;
}
</style>
